.full {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.flex {
	display: flex;
	flex-direction: row;
}
.flexAuto {
	flex: 1;
	overflow: hidden;
}
// 设置主轴方向 x y
$direction: (
	// 从左到右（默认值）
	'r': row,
	// 从右到左
	'rr': row-reverse,
	// 从上到下
	'c': column,
	// 从下到上
	'cr': column-reverse
);
// 主轴上子元素排列方式
$justify: (
	// 从头部开始，如果主轴是x轴，则从左到右（默认值）
	'start': flex-start,
	// 在主轴居中对齐(如果主轴是 x 轴则水平居中)
	'center': center,
	// 从尾部开始排列
	'end': flex-end,
	// 先两边贴边，再平分剩余空间☆☆☆
	'between': space-between,
	// 平分剩余空间
	'around': space-around
);
// 侧轴上子元素排列方式
$align: (
	// 从上到下
	'start': flex-start,
	// 挤在一起居中(垂直居中)
	'center': center,
	// 从下到上
	'end': flex-end,
	// 拉伸(默认值)
	'stretch': stretch
);

@each $alignKey, $alignVal in $align {
	@each $justifyKey, $justifyVal in $justify {
		@each $directionKey, $directionVal in $direction {
			// flex-start-center
			.flex-#{$justifyKey}-#{$alignKey} {
				display: flex;
				justify-content: #{$justifyVal};
				align-items: #{$alignVal};
			}
			// flex-r-start-center
			.flex-#{$directionKey}-#{$justifyKey}-#{$alignKey} {
				display: flex;
				flex-direction: #{$directionVal};
				justify-content: #{$justifyVal};
				align-items: #{$alignVal};
			}
		}
	}
}

@mixin flex-layout($columns, $margin: 8) {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -#{$margin}rpx;

	.flex-item {
		width: calc((100% + #{$margin}rpx) / #{$columns} - #{$margin}rpx);
		margin-bottom: #{$margin}rpx;

		// 添加右边距，但排除每行最后一个元素
		&:not(:nth-child(#{$columns}n)) {
			margin-right: #{$margin}rpx;
		}
	}
}

// 生成默认列数布局（使用默认 margin: 8rpx）
@for $i from 1 through 10 {
	.flex-#{$i} {
		@include flex-layout($i);
	}
	@for $m from 1 through 30 {
		.flex-#{$i}-#{$m} {
			@include flex-layout($i, $m);
		}
	}
}
